<template>
  <!-- 总额占比 -->
  <div id="proportionOfTotal">
    <div class="topBox">
      <el-icon class="icon" color="#1481F4" size="26"
        ><el-icon-caret-right
      /></el-icon>
      <p>总额占比</p>
    </div>
    <scEcharts :option="option"></scEcharts>
  </div>
</template>
<script>
import scEcharts from '@/components/scEcharts'
export default {
  name: 'proportionOfTotal',
  components: {
    scEcharts
  },
  data () {
    return {
      option: {
        title: [{
          text: '月份占比年应收总额',
          left: '25%',
          top: '60%',
          textAlign: 'center',
          textStyle: {
            fontWeight: 'normal',
            fontSize: '16',
            color: '#AAAFC8',
            textAlign: 'center',
          },
        }, {
          text: '月应收总额占比',
          left: '75%',
          top: '60%',
          textAlign: 'center',
          textStyle: {
            color: '#AAAFC8',
            fontWeight: 'normal',
            fontSize: '16',
            textAlign: 'center',
          },
        }],
        series: [{
          name: '应收总额',
          type: 'gauge',
          center: ['25%', '50%'], // 默认全局居中
          radius: '50%',
          axisLine: {
            show: true,
            lineStyle: { // 属性lineStyle控制线条样式
              color: [
                [0 / 100, '#1481F4'],
                [1, '#F0EFF8']
              ],
              width: 10
            }
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          pointer: {
            show: false,
            length: '0',
            width: '0'
          },
          detail: {
            formatter: '{value}%',
            offsetCenter: [0, '5%']
          },
          data: [{
            value: 0,
            label: {
              textStyle: {
                fontSize: 12
              }
            }
          }]
        }, {
          name: '实收总额',
          type: 'gauge',
          center: ['75%', '50%'], // 默认全局居中
          radius: '50%',
          axisLine: {
            show: true,
            lineStyle: { // 属性lineStyle控制线条样式
              color: [
                [0 / 100, '#BE68E3'],
                [1, '#F0EFF8']
              ],
              width: 10
            }
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          pointer: {
            show: false,
            length: '0',
            width: '0'
          },
          detail: {
            formatter: '{value}%',
            offsetCenter: [0, '5%']
          },
          data: [{
            value: 0,
            label: {
              textStyle: {
                fontSize: 12
              }
            }
          }]
        }]
      }

    }

  },
  props: {
    date: {
      type: String,
      required: true,
      default: () => new Date().getFullYear().toString()
    }
  },
  watch: {
    date (val) {
      this.getData()
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    async getData () {
      let { data } = await this.$API.finance.getProportionOfTotal.get({ time: this.date })
      this.option.series[0].axisLine.lineStyle.color[0] = [data.planMoneyPercentage / 100, '#1481F4']
      this.option.series[0].data[0].value = data.planMoneyPercentage
      this.option.series[1].axisLine.lineStyle.color[0] = [data.customerPaymentPercentage / 100, '#BE68E3']
      this.option.series[1].data[0].value = data.customerPaymentPercentage
    }
  }
}
</script>
<style lang="scss" scoped>
#proportionOfTotal {
  width: 40%;
  height: 100%;
  padding: 20px 20px 40px 20px;
  margin-left: 20px;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.1);
  .topBox {
    display: flex;
    align-items: center;
    font-size: 18px;
  }
}
</style>